<script lang="ts" setup>
import * as courseApi from "@/api/train/course";
import CourseList from "./components/course-list.vue";
import { CourseTag } from "@/types/course";

const tabList = [
  {
    id: "all",
    title: "全部课程",
  },
  {
    id: "mine",
    title: "我的课程",
  },
];
const props = defineProps({
  type: {
    type: String,
    required: true,
  },
});



// const tagList = ref<CourseTag[]>([]);
// courseApi.getCourseTagList().then((res) => {
//   tagList.value = res.data;
// });

const tabValue = ref(0);
</script>

<template>
  <div class="h-full flex flex-col overflow-hidden bg-gray-1">
    <!-- 课程列表 -->
    <div class="flex-grow of-hidden">
      <nut-tabs class="course-list h-full of-hidden" v-model="tabValue" type="smile" title-scroll sticky>
        <nut-tab-pane v-for="item in tabList" :key="item.id" class="h-full bg-transparent p-0 of-hidden" :title="item.title">
          <div class="h-full of-scroll">
            <course-list class="py-4" :class="[item.id === 'mine' ? 'flex flex-col' : 'grid grid-cols-2 gap-4 px-4']" :category="item.id" :type="props.type" />
          </div>
        </nut-tab-pane>
      </nut-tabs>
    </div>
  </div>
</template>

<style>
.course-list .nut-tabs__content {
  height: 0;
  flex-basis: 0;
  flex-grow: 1;
}
</style>
